<template>
	<div class='modal'>
		<div class='modal-dialog'>
			<div class='modal-content'>
				<div class='modal-header'>
					<span class="icon-close-model" @click='closeModal'></span>
				</div>
				<div class='modal-body'>
					<img class='icon-share' src='../../../../static/img/invite.png'></img>
					<span class='share-title'>邀请好友，各获100元礼券</span>
					<div class='share-tip-com'>
						<div class='share-item'>
							<div class='icon-circle'></div>
							<span class='share-span'> 好友通过您的链接注册账号后，将会获得￥100礼券</span>
						</div>
						<div class='share-item'>
							<div class='icon-circle'></div>
							<span class='share-span'>一旦好友完成第一次消费，您即可获得￥100礼券</span>
						</div>
					</div>
				</div>
				<div class='modal-footer'>
					<div class='share-btn' catchtap='share'><span>立即邀请</span></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			isShowShareCome:Boolean
		},
		data() {
			return {}
		},
		mounted() {},
		created() {

		},
		methods: {
			closeModal(){
				this.$emit("hideShareCome",false);
			}
		},

	}
</script>

<style scoped lang="scss">
/* pages/components/share/share-com.wxss */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.modal-content {
  width: 670px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 40px 40px 0 rgba(0, 0, 0, 0.08)
}
.modal-header {
  display: flex;
  justify-content: flex-end;
  padding: 40px 36px 36px;
}
.icon-close-model{
	display: inline-block;
	width: 39px;
	height: 39px;
	background-size: 100% 100%;
	background-image: url(http://47.98.119.130/test/yami/Pupupclose.png);
}
.modal-body {
  padding: 0 36px;
  margin-bottom: 50px;
}
.modal-body .icon-share {
  display: block;
  width: 104px;
  height: 108px;
  margin: 0 auto 56px;
}
.modal-body .share-title {
  display: block;
  font-size: 40px;
  color: #4a4a4a;
  text-align: center;
  margin-bottom: 40px;
}
.modal-body .share-item {
  position: relative;
  padding-left: 32px;
  width: 430px;
  margin: 0 auto 40px;
}
.modal-body .share-item::after {
  position: absolute;
  top: 20px;
  left: 0;
  width: 10px;
  height: 10px;
  border: 1px solid #979797;
  border-radius: 50%;
  content: "";
  
}
.share-item .share-span {
  color: #9b9b9b;
  font-size: 30px;
  line-height: 42px;
}
.modal-footer {
  padding: 56px 0 100px;
}
.share-btn {
  width: 200px;
  height: 70px;
  border-radius: 8px;
  margin: 0 auto;
  background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
  color: #fff;
  text-align: center;
  line-height: 70px;
  font-size: 28px;
  box-shadow: 0 20px 20px 0 rgba(244,63,92,0.15);
}
</style>